<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script type="module">
	// 1- 基本用法，直接导出
	// 导出的变量或常量的名字必须与引入的一致
	// 通过import绑定的数据不允许直接修改
	// import {a,b,c,d,fn,fn2} from "./module/mo1.js";
	// // 不允许直接修改
	// // c = 90;
	// fn(90);
	// console.log(c);// 90
	
	// 2- 解构赋值的形式
	// import {a,b,d} from "./module/mo2.js";
	//
	// console.log(a,b,d);// 1 2 4
	
	// 3- 解决冲突
	// import {username,age,b as b3 } from "./module/mo3.js";
	// import {a,b,d} from "./module/mo2.js";
	// console.log(b,b3);//  2 3
	
	// 4- 命名空间
	// import * as suibian from "./module/mo4.js";
	// console.log(suibian.a,suibian.b,suibian.c);// 1 2 3
	
	// 5- 先定义再导出
	// import {a,b6,c,d} from "./module/mo6.js";
	// import {b} from "./module/mo3.js";
	//
	// console.log(a,b,c,d,b6);// 1 3 3 4 6
	
	// 6- 注意
	// 特点：模块只有第一次被引入时执行一次，并对其导出数据进行缓存处理。
	//      后面的引入均来自于缓存！
	// import {num,changeNum} from "./module/mo7.js";
	// import {num as num2} from "./module/mo7.js";
	// console.log(num,num2);// 100 100;
	// changeNum(1);
	// console.log(num,num2);// 101 101
	
	// 7- 练习
	// 8- 默认导出
	// import suibian from "./module/mo8.js";
	//
	// console.log(suibian);// 10
	
	// 9- 混合导出:export 与 export default 结合使用
	// import suibian,{a,b} from "./module/mo9.js";
	//
	// console.log(a,b,suibian.username,suibian.age);
	
	// 10- 省略绑定
	// import "./module/mo10.js";
	// const arr = [1,2,3,4];
	// console.log(arr.getLast());
	
	// 11- 混合导出2
	// import info,{a,b} from "./module/mo11.js";
	// console.log(a,b,info.username,info.age);// 1 2 zhangsan 12
	
	// 12- 引入模块时，from右侧不允许是变量或常量，
	// 另外引入模块的语法是不允许放置在函数中的
	
	// 异常：不允许使用变量或常量
	// let str = "./module/mo12.js";
	// import info,{a,b} from str;
	
	// 异常：不允许在函数中调用模块
	// function fn(){
	// 	import info from "./module/12.js";
	// 	console.log(info);// {username:"zhangsan",age:12}
	// }
	// fn();
	
	// 返回的是一个Promise实例，成功的值即为mo12.js导出的数据
	// 1
	// const result = import("./module/mo12.js");
	// result.then(value=>{
	// 	console.log(value.a,value.b,value.default.username,value.default.age);
	// })
	
	// 2 链式调用
	// import("./module/mo12.js").then(({a,b,default:{username,age}})=>{
	// 	console.log(a,b,username,age);
	// })
	
	// 3- async await
	// const result = await import("./module/mo12.js");
	// console.log(result.a,result.b,result.default);
	
	(async function(){
		let str = "./module/mo12.js";
		const result = await import(str);
		console.log(result.a,result.b,result.default);
	})();
	
</script>
</html>